import React, { Component } from 'react';
import {StyleSheet, Modal, Text, View, TouchableOpacity} from 'react-native';

export default class Confirm extends Component {
	constructor() {
		super()
		this.state = {
			modalVisible: false
		}
	}
	// componentDidMount() {
	// 	this.setState({
	// 		modalVisible: this.props.modalVisible
	// 	})
	// }
	componentWillReceiveProps = (nextProps) => {
		this.setState({
			modalVisible: nextProps.modalVisible
		})
	}
	render() {
		return (
			<View style={{ zIndex: 999 }}>
				{/*模态框*/}
				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.modalVisible}
					underlayColor="blue"
					style={{flex: 1, padding: 0}}
				>
					<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)'}}>
						<View style={{width: '85%', height: 220, backgroundColor: '#fff', borderRadius: 5}}>
							<View style={{width: '100%', justifyContent: 'center', alignItems: 'center', height: 50, borderBottomWidth: 1, borderColor: '#eee', padding: 0}}>
								<Text style={{ color: '#ff7606', fontSize: 16 }}>{this.props.title}</Text>
							</View>
							{this.props.children}
							{/*选择按钮*/}
							{this.props.isSingleButton
								?
								(
									<View style={{height: 50, flexDirection: 'row', borderTopWidth: 1, borderColor: '#eee'}}>
										<TouchableOpacity
											style={{height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center'}}
											onPress={this.props.handleCancelOrder}
										>
											<Text style={{color: '#ff7606'}}>我知道了</Text>
										</TouchableOpacity>
									</View>
								)
								:
								(<View style={{height: 50, flexDirection: 'row', borderTopWidth: 1, borderColor: '#eee'}}>
								<View style={{flex: 1, height: '100%', borderRightColor: '#eee', borderRightWidth: 1}}>
									<TouchableOpacity
										style={{height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center'}}
										onPress={this.props.handleCancelOrder}>
										<Text style={{color: '#b3b3b3'}}>{this.props.negative}</Text>
									</TouchableOpacity>
								</View>
								<View style={{flex: 1}}>
									<TouchableOpacity
										style={{height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center'}}
										onPress={this.props.handleConfirmOrder}>
										<Text style={{color: '#ff7606'}}>{this.props.positive}</Text>
									</TouchableOpacity>
								</View>
							</View>)}

						</View>
					</View>
				</Modal>
			</View>
		)
	}
}
